<template>
    <div>
        <Header :title="title"></Header>
        <div class="modify">
            <div class="content aui-bg-f">
                <div class="aui-content aui-padded-b-5">
                    <ul class="aui-list aui-form-list" style="background-image: none">
                         <li class="aui-list-item aui-padded-t-15 van-hairline--bottom">
                            <van-row>
                                <van-col span="6" class="aui-text-center aui-text-3">
                                    手机帐号
                                </van-col>
                                <van-col span="18" class="aui-padded-l-10">
                                    <div class="aui-text-9" v-text="user.username" v-cloak>
                                    </div>
                                </van-col>
                            </van-row>
                        </li>

                        <li class="aui-list-item aui-margin-t-15 van-hairline--bottom">
                            <van-row>
                                <van-col span="6" class="aui-text-center aui-text-3">
                                    旧密码
                                </van-col>
                                <van-col span="18" class="aui-padded-l-10">
                                    <input type="password" name="mobile" v-model="user.old_password" placeholder="请输入旧密码"  class="aui-ftn14">
                                </van-col>
                            </van-row>
                        </li>
                        <li class="aui-list-item aui-margin-t-15 van-hairline--bottom">
                            <van-row>
                                <van-col span="6" class="aui-text-center aui-text-3">
                                    新密码
                                </van-col>
                                <van-col span="18" class="aui-padded-l-10">
                                    <input type="password" name="mobile" v-model="user.password" placeholder="请输入新密码"  class="aui-ftn14">
                                </van-col>
                            </van-row>
                        </li>
                        <li class="aui-list-item aui-margin-t-15 van-hairline--bottom">
                            <van-row>
                                <van-col span="6" class="aui-text-center aui-text-3">
                                    确认密码
                                </van-col>
                                <van-col span="18" class="aui-padded-l-10">
                                    <input type="password" name="mobile" v-model="user.repassword" placeholder="请输入确认密码"  class="aui-ftn14">
                                </van-col>
                            </van-row>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="aui-text-f aui-text-center aui-bg-red modify-btn" @click="fnSubmit">确认</div>
        </div>
    </div>
</template>
<script>
  import Sign from '../../../service/sign.js'
  import Header from '../../components/header.vue'
    export default {
        name: 'forget',
        data () {
            return {
                title: '修改密码',
                user: {
                    username: '',
                    old_password: '',
                    password: '',
                    repassword: ''
                },
                old_password: '',
                password: ''
            }
        },
        components: {
            Header
        },
        mounted () {
          this.user.username = this.$store.state.username;
        },
        methods: {
            // 修改密码功能
            fnSubmit: function() {
                var passwordFormat = /^.{6,16}$/ //密码格式
                 if (!this.user.old_password) {
                    this.utils.fnMsg('旧密码不能为空！');
                    return false;
                } else if (!this.user.password) {
                    this.utils.fnMsg('新密码不能为空！');
                    return false;
                } else if (!passwordFormat.test(this.user.password)) {
                    this.utils.fnMsg('请输入6~16位的密码');
                    return false;
                } else if (!this.user.repassword) {
                    this.utils.fnMsg('确认密码不能为空！');
                    return false;
                } else if (this.user.password != this.user.repassword) {
                    this.utils.fnMsg('两次密码输入不一致！');
                    return false;
                } else {
                    // 修改密码api
                    Sign.fnModify({uid: this.$store.state.uid, password: this.$md5(this.user.old_password).toUpperCase(),
                    password1: this.$md5(this.user.password).toUpperCase(), password2: this.$md5(this.user.repassword).toUpperCase(), isToken: true}).then(res => {
                      if (res) {
                          this.utils.fnMsg(res.msg);
                          if (res.status) {
                            var vm = this;
                            setTimeout(function() {
                                vm.back()
                            }, 1000)
                          }
                      }
                    })
                }
            },
            fnOpenLogin: function() {
                this.utils.fnOpenCommon(this, {name: 'login', query: {from: this.$route.query.from, active: 0}})
            }
        }
    }
</script>
<style lang="scss" scoped>
    div.modify {
        div.content {
            li {
                height: 40px;
                line-height: 40px;
                input {
                    height: 36px;
                    line-height: 36px;
                    border: 0;
                    max-width: 90%;
                    overflow-x: hidden;
                }
            }
            div.bt {
                padding: 10px 12px 0 12px;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-flex-direction: row;
                    -ms-flex-direction: row;
                        flex-direction: row;
                -webkit-justify-content: space-between;
                    -ms-flex-pack: justify;
                        justify-content: space-between;
                div.download {
                    border: 1px solid var(--pink);
                    height: 30px;
                    line-height: 30px;
                    border-radius: 15px;
                    padding: 0 10px;
                }
            }
        }
        div.modify-btn {
            height: 50px;
            line-height: 50px;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
        }
    }
</style>
